<template>
  <div class="app-container">
    <SearchBar :search="searchParams" @on-search="search">
         <el-form :model="searchParams" inline class="search-form-inline">
             <el-row>
                <el-col :span="8">
                <el-form-item label="菜单名称">
                  <el-input v-model="searchParams.menuName" placeholder="菜单名称" clearable></el-input>
                </el-form-item>
               </el-col>
                <el-col :span="8">
                <el-form-item label="上级菜单">
                  <el-input v-model="searchParams.parentCodeName" placeholder="上级菜单" clearable></el-input>
                </el-form-item>
               </el-col>
                <el-col :span="8">
                <el-form-item label="状态">
                  <el-select clearable v-model="searchParams.status" placeholder="选择状态">
                    <el-option v-for="item in statusOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
               </el-col>
             </el-row>
         </el-form>
    </SearchBar>
      <page-table
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        :WP_Loading="loading">
          <el-table-column label="菜单名称" prop="menuName"></el-table-column>
          <el-table-column label="上级菜单" prop="parentCodeName"></el-table-column>
          <!-- <el-table-column label="排序（同级有效）" prop="sort"></el-table-column> -->
          <el-table-column label="状态" prop="status"  :formatter="formatterStatus">
          </el-table-column>
          <el-table-column label="操作" width="100">
          <template slot-scope="scope">
              <el-button type="warning" @click.native="toEdit(scope.row)">编辑</el-button>
          </template>
          </el-table-column>
        </page-table>
        <MenuDetail :title="title"  :visible.sync="visible" :data="editInfo"  @afterSave="search"/>
  </div>
</template>
<script>
import SearchBar from '@/components/SearchBar'
import PageTable from '@/components/PageTable'
import MenuDetail from './components/MenuDetail'
import Mixins from './mixins'
export default {
  components: {SearchBar, PageTable, MenuDetail},
  mixins: [Mixins],
  mounted () {
    this.search()
  },
  data () {
    return {
      id: 'menu',
      visible: false,
      title: '',
      editInfo: {},
      statusOptions: [{label: '禁用', value: 0}, {label: '启用', value: 1}]
    }
  },
  methods: {
    toEdit (row) {
      this.visible = true
      this.isCreate = false
      this.title = '编辑'
      this.editInfo = {...row}
    },
    formatterStatus (row, column, cellValue, index) {
      const obj = this.statusOptions.find(v => {
        if (cellValue === v.value) {
          return v
        }
      })
      return (obj && obj.label) || cellValue
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
